import { NextPage } from "next";
import {
  Button,
  Card,
  DatePicker,
  Descriptions,
  Divider,
  Drawer,
  Form,
  Input,
  message,
  Popconfirm as PopConfirm,
  Popover,
  Space,
} from "antd";
import SearchPage from "../components/SearchPage";
import { DeleteOutlined, SettingOutlined } from "@ant-design/icons";
import request from "../utils/request";
import { BusinessItemInfo } from "../types/business";
import { ContextVal } from "../components/SearchPage/context";
import { useState } from "react";
import CreateAndModify from "../components/BusinessModel/createAndModify";
import { map } from "lodash";

let pageCore: ContextVal;

const BusinessModel: NextPage = () => {
  const [list, setList] = useState<BusinessItemInfo[]>([]);
  const [modalInfo, setModalInfo] = useState<{
    flag: number;
    itemInfo: any;
  }>({
    flag: 0,
    itemInfo: null,
  });
  const onSetting = async (item?: BusinessItemInfo) => {
    let res: BusinessItemInfo;
    const isModify = !!item;

    if (isModify) {
      res = await request.get<BusinessItemInfo>(
        `/pattern/info/v2/${item.pattern_id}`
      );
    }
    setModalInfo({
      flag: modalInfo.flag + 1,
      itemInfo: res,
    });
  };

  const onDelete = async (item: BusinessItemInfo) => {
    await request.delete(`/pattern/info/${item.pattern_id}`);
    message.success("删除成功");
    pageCore.query?.mutate(null);
  };
  return (
    <SearchPage
      src="/pattern/info/page"
      breadcrumbList={[
        {
          href: "/businessModel",
          label: "业务模型管理",
        },
      ]}
      pageSizeOptions={[8, 16, 32]}
      uploadData={setList}
      onMount={(v) => (pageCore = v)}
    >
      <CreateAndModify
        data={modalInfo.itemInfo}
        flag={modalInfo.flag}
        onFinish={() => pageCore.query?.mutate(null)}
      />
      <SearchPage.Search addLabel="新增模型" onAddClick={() => onSetting()}>
        <Form.Item label="模型名称搜索" name="title">
          <Input placeholder="请输入模型名称" />
        </Form.Item>
        <Form.Item label="创建时间" name="time">
          <DatePicker.RangePicker />
        </Form.Item>
      </SearchPage.Search>
      <SearchPage.Cont>
        <div className="mx-auto w-[1320px]">
          {list.map((item) => (
            <Card
              hoverable
              key={item.pattern_id}
              className="m-[15px] inline-block w-[300px]"
              bodyStyle={{ minHeight: 300 }}
              actions={[
                <SettingOutlined
                  key="setting"
                  onClick={() => onSetting(item)}
                />,
                <PopConfirm
                  title="删除"
                  key="delete"
                  onConfirm={() => onDelete(item)}
                  okText="确定"
                  cancelText="取消"
                >
                  <DeleteOutlined />
                </PopConfirm>,
              ]}
            >
              <div onClick={() => onSetting(item)}>
                <Card.Meta title={item.title} description={item.gmt_create} />
                <Divider />
                <Descriptions column={1}>
                  {map(
                    [
                      ["element_short_info", "元素"],
                      ["face_short_info", "人物"],
                      ["logo_short_info", "图标"],
                      ["key_word_short_info", "文字"],
                      ["total_score", "总分"],
                    ],
                    ([key, label]) =>
                      item[key] && (
                        <Descriptions.Item>
                          <div className="flex w-full">
                            <div>{label}：</div>
                            <Popover content={item[key]}>
                              <div className="w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
                                {item[key]}
                              </div>
                            </Popover>
                          </div>
                        </Descriptions.Item>
                      )
                  )}
                </Descriptions>
                {item.pack_file_type && (
                  <>
                    <Divider />
                    <Descriptions column={1} layout="vertical">
                      <Descriptions.Item>
                        <div>分装类型：</div>
                        <Popover content={item.pack_file_type}>
                          <div className="w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
                            {item.pack_file_type}
                          </div>
                        </Popover>
                      </Descriptions.Item>
                    </Descriptions>
                  </>
                )}
              </div>
            </Card>
          ))}
        </div>
      </SearchPage.Cont>
    </SearchPage>
  );
};

export default BusinessModel;
